import React, { useEffect, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { Radio, Button } from 'antd';
import {
    FileExcelOutlined,
    FileImageOutlined,
    PieChartOutlined,
    BarChartOutlined,
    LineChartOutlined,
} from '@ant-design/icons';
import XLSX from 'xlsx';
import style from '../../DataBoard.css';
import CustomDatePicker from './CustomDatePicker';
import moment from 'moment';
import style2 from './CustomDatePicker.css';

function PieChart({ theme, forTime }){
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [];
    let textToKey = {};
    let data;
    if ( forTime ) {
        data = [
            { sumUsage:100, name:'尖', cost:200, sumUsagePercentage:10, costPercentage:14.3 }, 
            { sumUsage:200, name:'峰', cost:300, sumUsagePercentage:20, costPercentage:24.1 }, 
            { sumUsage:300, name:'平', cost:400, sumUsagePercentage:30, costPercentage:28.5  }, 
            { sumUsage:400, name:'谷', cost:500, sumUsagePercentage:40, costPercentage:35.7 }
        ]
    } else {
        data = [
            { sumUsage:100, name:'制冷主机', cost:300, sumUsagePercentage:10, costPercentage:25 }, 
            { sumUsage:200, name:'冷却泵', cost:300, sumUsagePercentage:20, costPercentage:25 }, 
            { sumUsage:300, name:'冷冻泵', cost:300, sumUsagePercentage:30, costPercentage:25  }, 
            { sumUsage:400, name:'冷却塔', cost:300, sumUsagePercentage:40, costPercentage:25 }
        ];
    }
    if ( data.length ) {
        data.forEach(item=>{
            seriesData.push({
                name:item.name,
                value:item['cost'],
                ratio:item['costPercentage']
            });
        })
    } 
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height: '100%' }}
            option={{
                
                legend: {
                    
                        data: seriesData.map((i) => i.name),
                        left: '56%',
                        top: 'middle',
                        // top:'12%',
                        // bottom:'10%',
                        orient: 'vertical',
                        type: 'scroll',
                        itemWidth: 8,
                        itemHeight: 8,
                        icon: 'circle',
                        formatter: (name) => {
                            // let temp = findData(name, seriesData);
                            let obj = seriesData.filter(i=>i.name === name)[0];
                            return `${name}\xa0\xa0\xa0\xa0{title|${obj.ratio}%}\xa0\xa0\xa0\xa0{value|${obj.value}}{title|元}`;
                        },
                        textStyle: {
                            color: textColor,
                            rich: {
                                title: {
                                    fontSize: 12,
                                    lineHeight: 12,

                                    color: textColor,
                                },
                                value: {
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 20,
                                    color: textColor,
                                },
                            },
                        },
                },
                
                tooltip: {
                    trigger: 'item',
                },
                color: ['#ff7d00', '#f53f3f', '#0fc6c2', '#fadc19', '#9fdb1d'],
                series: [
                    {
                        label: {
                            show: false,
                            position: 'center',
                            // formatter: (params) => {
                            //     return `{a|${data.warningTotal || 0}}{b|件}\n{b|总告警}`;
                            // },
                            rich: {
                                a: {
                                    color: textColor,
                                    fontSize: 22,
                                    padding: [0, 4, 0, 0],
                                },
                                b: {
                                    color: '#8a8a8a',
                                    fontSize: 12,
                                    padding: [6, 0, 6, 0],
                                },
                            },
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        labelLine: {
                            show: false,
                        },
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['38%', '50%'],
                        data: seriesData,
                    }
                ],
            }}
        />
    );
}

function CostPercent({ theme }){
    
    return (
        <div className={style['card-container']} style={{ boxShadow:'none' }}>
            {/* { loading && <Loading /> } */}
            <div
                className={style['card-container-title']}
                style={{ height: '2rem', borderBottom:'none', lineHeight:'2rem' }}
            >
                <div style={{ display:'flex', alignItems:'center' }}>
                    <span style={{ marginRight: '1rem', color: theme === 'dark' ? '#fff' : '#000' }}>费用占比</span>
                    <CustomDatePicker
                        theme={theme}
                        initTimeType='2'
                        onDispatch={(action)=>{
                            // setLoading(true);
                            // new Promise((resolve, reject) => {
                            //     onDispatch({ type: 'board/fetchSingleEnergyCost', payload: { resolve, reject, timeType:action.timeType } })
                            // })
                            // .then((data) => {
                            //     setSourceData({ cost: data.cost, date: data.date, energy: data.energy });
                            //     setLoading(false);
                            // })
                        }}
                    />
                </div>
            </div>
            <div style={{ height:'calc( 100% - 2rem)' }}>
                <div style={{ display:'inline-block', width:'50%', height:'100%' }}>
                    <PieChart forTime={true} />
                </div>
                <div style={{ display:'inline-block', width:'50%', height:'100%' }}>
                    <PieChart />
                </div>
            </div>             
        </div>
    )
}

export default CostPercent;